<template>
  <el-col :span="4" class="text-center my-auto">
    <img src="@/assets/logo.png" style="width: 5rem" />
  </el-col>
  <el-col :span="16" class="my-auto">
    <el-input
      placeholder="请输入笔记名字关键字"
      class="w-75"
      v-model="searchVal"
    >
      <template #append>
        <el-button type="info" plain  @click="getNoteLi">
          <el-icon style="font-size: 1rem"><Search /></el-icon>
        </el-button>
      </template>
    </el-input>
  </el-col>
  <el-col :span="4" class="text-center my-auto">
    <!--登录后的模块-->
    <div class="mt-3 ms-3" v-if="loginToken">
<el-button @click="this.$router.push('@/views/space/note')">记笔记</el-button>
  <span class="ms-4" @click="this.$router.push('/space/person')">
  <router-link to="@/views/space/person" class="router-test"> <!--跳转到个人信息-->
              <img :src="person.headUrl" class="headImg" />
              </router-link>
              </span>
        </div>
        <div class="mt-3 ms-3" v-else>
<!--给登录按钮绑定一个点击事件，由于js代码只有一行，可以直接写到标签上-->
    <el-button @click="this.$router.push('/login')">登录</el-button>
    <el-button @click="this.$router.push('/registry')">注册</el-button>
        </div>
    
  </el-col>
</template>

<script>
import { Search } from "@element-plus/icons-vue";
import auth from "@/auth/auth.js";

export default {
  name: "HomeHeader",
  //我们使用emits选项自定义事件，这里定义了一个事件，名字叫getSearchVal
  //该事件由，使用HomeHeader组件的地方，来调用
  emits:['getSearchVal'],
  components: {
    Search,
  },
  data(){
    return{
      searchVal:null,//搜索的值
      isLogin:null,
      headUrl:null,
    }
  },
    mounted() {
      this.isLogin = auth.isLogin()
      this.headUrl = auth.getLoginUser().headUrl
    },
    methods:{
      getNoteli(){
        this.$router.push("/list/"+this.searchVal);
      }
    }
};
</script>

<style scoped>
.headImg {
  width: 3rem;
  border-radius: 50%; /*圆角 */
}
.item {
  margin-top: 5px;
  margin-right: 20px;
}
</style>